import HealthReport from '@/components/HealthReport';
import { useIntl } from '@umijs/max';
import moment from 'moment';
import React from 'react';
import styles from '../index.less';

type IProps = {
  batteryParams?: {
    currentDemarcateCapacity: number;
    compareResult: number;
    currentStationCapacity: number;
  };
};
const BatteryParams: React.FC<IProps> = (props) => {
  const intl = useIntl();
  const { batteryParams } = props;
  return (
    <div className={styles.batteryContent}>
      <div className={styles.batteryContentLeft}>
        <div className={styles.batteryContentImg}></div>
        <div>
          <div className={styles.batteryContentText}>
            {intl.formatMessage({ id: 'batteryVoltage.cycle.maxActualCapacity' })}(MWh)
          </div>
          <div className={styles.batteryContentNum}>
            {batteryParams?.currentStationCapacity?.toFixed(2) || '-'}
          </div>
        </div>
        <div className={styles.batteryContentSym}>/</div>
        <div>
          <div className={styles.batteryContentText}>
            {intl.formatMessage({ id: 'batteryVoltage.cycle.maxVolCapacity' })}(MWh)
          </div>
          <div className={styles.batteryContentNum}>
            {batteryParams?.currentDemarcateCapacity?.toFixed(2) || '-'}
          </div>
        </div>
        <div className={styles.batteryContentSym}>→</div>
        <div>
          <div className={styles.batteryContentText}>
            {intl.formatMessage({ id: 'batteryVoltage.cycle.compareReduce' })}(kWh)
          </div>
          <div className={styles.batteryContentNum}>
            {batteryParams?.compareResult?.toFixed(2) || '-'}
          </div>
        </div>
      </div>
      <HealthReport date={moment().format('YYYY-MM-DD')} />
    </div>
  );
};

export default BatteryParams;
